<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/topic">帖子列表</router-link>
    <router-link to="/pinia">Pinia</router-link>
    {{ st.count }}
  </nav>
  <!-- 路由出口 -->
  <router-view />
</template>
<script setup>
// 事件对象是一个对象，包含了事件的所有信息
// 事件修饰符：.prevent 阻止默认行为 .stop 阻止事件冒泡 .capture 捕获事件 .self 只有在事件的目标是当前元素时才触发 .once 事件只触发一次
// 数据驱动
// 状态
// 路由
import { useCounterStore } from './stores/counter'
import Home from './views/Home.vue'
import { ref } from 'vue'
const title = ref('单页应用SPA  组件化开发')
const showTitle = ref(true)
const input = ref('')
const list = ref([])
const st = useCounterStore()
const test = () => {
  console.log('test')
}
const add = () => {
  list.value = [...list.value,{ text: input.value, id: Date.now()}]
  // list.value.push({
  //   text: input.value
  // })
  input.value = ''
}
// 使用ID删除
const deleteItemWithId = (id, e) => {
  console.log(e)
  // list.value.splice(idx,1)
  // list.value = list.value.filter((item) => id !== item.id)
}
// 使用索引删除
const deleteItem = (idx) => {
  // list.value.splice(idx,1)
  list.value = list.value.filter((item,index) => index !== idx)
}
// 组件就是页面的一块视图
const changeTitle = () => {
  title.value = 'hello world'
}
const toggleTitle = () => {
  showTitle.value = !showTitle.value
}
</script>
<style scoped>
nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 2rem;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

nav a.router-link-active {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>
